<template>
	<div class="root">
		<div class="content">   
			<div class="con_navmeun">
				<factory-plan :planYearList="planYearList" @handleSelect="fhandleSelect"></factory-plan>
			</div>
			<div class="con_rightgroup">
				<plan-status :planMonthObj="planMonthObj"></plan-status>
				<div class="h10"></div>
				<one-month-plan :data="data"></one-month-plan>
				<!-- <div class="h10"></div> -->
                <div class="chart-border" :style="{height:tableHeight+'px'}">
                	<div>
		 				 <highcharts :options="options"  ref="highCharts1" :style="{height:tableHeight2+'px'}"></highcharts>     		 
                	</div>
                	<div>
                		 <highcharts :options="options2"  ref="highCharts2" :style="{height:tableHeight2+'px'}"></highcharts>  
                	</div>
 				</div>
			</div>
		</div>

		
	</div>
</template>
<script>
import FactoryPlan from './components/factoryPlan2'
import PlanStatus from './components/planStatus'
import OneMonthPlan from './components/oneMonthPlan'
import * as workoutPlan from "@/api/plan/workoutPlan";

export default{
	components:{
		FactoryPlan,
		PlanStatus,
        OneMonthPlan
	},
	data () {
       return{
       	   planYearList:[],
       	   planMonthObj:{},
       	   data:[],
       	   monthId:0,
       	   a:[],
       	   c:[],
       	   d:[],
       	   e:[],
           // series :[{name: '总量',data:[]}, {name: '已完成',data:[]}],
           options: {
           	    chart: {
		            type: 'bar'
		        },
		        title: {
		            text: '',
		            align:'left'
		        },
		        xAxis: {
		            categories: [],
		            title: {
		                text: null
		            }
		        },
		        yAxis: {
		            min: 0,
		            title: {
		                text: '完成数',
		                align: 'high'
		            },
		            labels: {
		                overflow: 'justify'
		            }
		        },
		        // tooltip: {
		        //     valueSuffix: ' 百万'
		        // },
		        plotOptions: {
		            bar: {
		                dataLabels: {
		                    enabled: true
		                    // ,allowOverlap 默认是 false，即不允许数据标签重叠
		                }
		            }
		        },
		        legend: {
		            layout: 'vertical',
		            align: 'right',
		            verticalAlign: 'top',
		            x: 0,
		            y: -10,
		            floating: true,
		            borderWidth: 1
		            // shadow: true
		        },
		        credits: {
		            enabled: false
		        },
		        series: [
		        {
		            name: '总量',
		            data:[]
		        }, {
		            name: '已完成',
		            data:[]
		        }
		        ]
	       },
	       options2:{
		           chart: {
				        type: 'line'
				    },
				    title: {
				        text: '',
				        align:'left'
				    },
				    xAxis: {
				        categories: ['1日','5日','10日','15日','20日','25日','30日'],
				        tickmarkPlacement:'on'
				    },
				    yAxis: {
				        title: {
				            text: '产品型号产量'
				        }
				    },
				    legend:{
				    	layout: 'vertical',
			            align: 'right',
			            verticalAlign: 'top',
			            x: -40,
			            y: -10,
			            floating: true,
			            borderWidth: 1
				    },
				    plotOptions: {
				        line: {
				            dataLabels: {
				                // 开启数据标签
				                enabled: true          
				            },
				            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
				            // enableMouseTracking: false
				        }
				    },
				    series: [
				    // {
				    //     name: '东京',
				    //     data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.26]
				    // }, {
				    //     name: '伦敦',
				    //     data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
				    // },{
				    //     name: '韩国',
				    //     data: [3.3, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
				    // }
				    ]	 
	       }

        }
	},
	methods:{
		fetchData() {
			workoutPlan.listPlanYear({pageSize:10,pageNum:1}).then(data => {
				this.planYearList = data.msg
				this.monthId = data.msg[0].planMonths[0].id
				this.fhandleSelect(this.monthId)
			})
		},
		fhandleSelect(name){
			var _this = this  
			this.c=[]
			this.d=[]
			this.a=[]
			this.e=[]
            workoutPlan.listPlanMonth({planId:name,isPlanMonthId:true}).then((data)=>{
            	 this.planMonthObj = data.msg
            	 this.data = data.msg.productPlanMonths
                 var b=data.msg.name
                 data.msg.productPlanMonths.forEach(function(currentValue,index){
                      _this.a.push(currentValue.productName);
                      _this.c.push(currentValue.productCount);
                      _this.d.push(currentValue.finishedCount);
                 }) 

                this.$refs.highCharts1.chart.update({
	                xAxis: { categories:_this.a },
	                title: { text:b+'达成率产量柱状分析'},
                    series:[{
                        name:'总量',
                        data:_this.c
                    },{
                        name: '已完成',
			            data:_this.d
                    }]
	            })	
                
                
                this.a.forEach(function(currentValue,index){
            	    var obj = {}
            	    obj.name = currentValue
            	    obj.data = [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
                    _this.e.push(obj)
                })

	            this.$refs.highCharts2.chart.update({
	            	title:{ text:b+'月产量曲线分析' }
	            })

	            if(this.$refs.highCharts2.chart.series.length > 0) {
                        var seriesRemove = this.$refs.highCharts2.chart.series;
                        for(var i= seriesRemove.length-1;i>=0;i--) {
                            seriesRemove[i].remove(true);
                    }
                }
                this.e.forEach(function(currentValue,index){
		            _this.$refs.highCharts2.chart.addSeries(currentValue,true);	           
                }) 
            })
		},
		updatahighCharts(){

		}
	},
	computed: {
        tableHeight() {
            const filterHeight = 0
            var tableHeight = this.getTableHeight(filterHeight)+28
            return tableHeight-200;
        },
        tableHeight2() {
            const filterHeight = 0
            var tableHeight2 = this.getTableHeight(filterHeight)+28
            return tableHeight2-203;
        }
    },
	created() {
		this.fetchData();
	},
	mounted() {
 
    }

}	
</script>
<style scoped>
	.root{
	
	}
	.content{
		width: 100%;
        display: flex;
        align-items: flex-start;
	}
	.content .con_navmeun{
        width: 200px;
        margin-top: 10px;
        margin-left: 10px;
	}
	.content .con_rightgroup{
        /*background: red;*/
        flex:1; 
        margin: 10px 10px 0 10px;
        box-sizing: border-box;
        position: relative;
	}
	.h10{
		height: 10px;
	}
    .chart-border{
    	border:1px solid #eee;
    	position: absolute;
    	top: 240px;
    	width:100%;
    	display: flex;
    }
    .chart-border>div{
    	flex:1;
    }
</style>